تاريخچه پيدايش وب: 

Tim Beers-Lee (تيم برنرز لي)، بنيانگذار شبکه جهاني وب، با راه اندازي يک وب سايت در آگوست سال ????، نام خود را به عنوان نخستين طراح وب در تاريخ به ثبت رساند. او در نخستين وب سايت خود از ابرمتن (Hyperlink) و پيوندي براي ايميل استفاده کرده بود.

 

در آغاز، سايتهاي وب با کدهاي ساده «HTML» نوشته مي شدند که گونه اي از زبان کدنويسي بود که ساختار ساده اي به وب سايت ها مي داد و شامل سرتيتر و پاراگراف، و توانايي پيوند دادن به صفحه هاي وب ديگر با ابرمتن بود. در مقايسه با روش هاي ديگر، اين راه تازه و متفاوتي بود که کاربران به سادگي مي توانستند با يک مرورگر، صفحه هاي پيوند خورده را باز کنند. با پيشرفت وب و هنر طراحي آن، زبان کد نويسي اش و ابرمتن يا HTML، پيچيده تر و پرانعطاف تر شد. ابزاري مانند جدول ها که بيشتر براي نمايش نمودارهاي داده اي بودند، بزودي مورد استفاده نادرست، براي چيدمان هاي پنهان در صفحه هاي وب قرار گرفتند. با پيدايش صفحه هاي الگوي وب يا «CSS»، روش نادرست طراحي با جدول هاي پنهان در صفحه، از گردونه خارج، و بجاي آن استفاده مناسب از صفحه هاي الگوي وب يا «CSS»، جايگزين شد. فن آوري هاي يکپارچه سازي پايگاه داده ها (Database)، مانند زبان هاي کدنويسي سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار سايت هاي وب را باز هم تغيير داده و آنرا پيشرفته تر کرده اند. همچنين با آمدن نگاره هاي جاندار و فن آوري هاي پويانمايي به صفحه ها، مانند فلش (Flash)، چهره وب بيش از پيش تغيير کرد و توانمندي هاي تازه به سازندگان رسانه و طراح هاي وب داده شد.

 

 

طراحي وب سايت: 

 طرح وب به قالب نمايشي و طراحي گرافيکي صفحات موجود در وب سايت مي گويند که معرف محتوا و مطالب آن وب سـايت مي باشد. در واقع يک وب سايت مجموعه اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب سايت مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب سايت خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب سايت ميباشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود. طرح وب جلوه بصـري هدف وب سايت است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير مي کند.

طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري خود در بکار بردن ابعاد و رنگها، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در کليه صفحات وب سايت، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب سايت بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين باشد که همه صفحات در يک سايت مشخص هستند.

 

 

براي وب سايت هاي تجاري عمومي، موارد زير از جمله اصلي ترين آنها به شمار مي روند: 

1.طراحي سايت بر طبق عنوان و محتواي مطالب مي باشد. 

2.مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند. 

3.سايت بـــايد قابل فهم بوده و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه اي بکار برد که به سرعت در اختيار بيننده قرار گيرند. 

4.نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با سليقه مخاطبان و محتواي سايت باشد. 

5.در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است. 

6.همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود. 

يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.

بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند.

هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.

 

 

تاثير سايت در اطلاع رساني:

داشتن يک سايت مانند داشتن يک کاتالوگ است اما با مزاياي بيشتر. يک کاتالوگ مي تواند شامل تصاوير و متون باشد اما در يک سايت مي توان از تصاوير، متون، فيلم و صوت و يا انيميشن نيز استفاده کرد. بنابر اين امکان اطلاع رساني جامع با محتوايي جذاب تر را مي دهد. همچنين هزينه يک سايت به مراتب کمتر و مقرون به صرفه تر از يک کاتالوگ است. زيرا براي طراحي، چاپ و انتشار هر نسخه از کاتالوگ نياز به هزينه است اما براي يک سايت فقط کافيست هزينه ي طراحي و نگهداري آن پرداخت شود و بعد از آن در طول سايت هزاران و يا ميليونها کاربر مي توانند بارها و بارها از آن بازديد کنند.

 

تاثير سايت در بازاريابي:

موتورهاي جستجو بدون هزينه براي شرکت و کار شما بازاريابي مي کنند بدين ترتيب که بتوانند سايت شما را پيدا کنند سپس کابري که به دنبال هر يک از خدمات و يا محصولات و يا اطلاعات ارائه شده در سايت شما باشد، اين موتورها کاربر را به سايت شما هدايت مي کنند. 

 

ايجاد قابليتهاي جديد تبليغاتي:

شما با داشتن يک سايت به راحتي مي توانيد وارد عرصه تجارت الکترونيک شويد و امکان استفاده از قابليت هاي تجارت الکترونيک برايتان به وجود مي آيد. از مهمترين اين قابليتها مي توان به تبليغات اينترنتي، تبليغات در موتورهاي جستجوگر، تبليغات کليکي و تبادل بنر و لينک اشاره کرد.

 

در دسترس بودن:

سايت همواره در تمامي ساعات شبانه روز و حتي روزهاي تعطيل نيز فعال و در دسترس کاربران و مشتريان است.

 

فعاليت گسترده تر حتي در خارج از مرزهاي کشور خودتان:

اگر شما سايتي داشته باشيد مي توانيد امکان فعاليت خود را در خارج از مرزهاي کشور محل سکونتتان به راحتي ايجاد نماييد و کاربران خارج از مرزهاي کشورتان نيز مي توانند به صورت شبانه روزي با شما و خدمات و محصولاتتان آشنا شوند و در صورت نياز از خدمات و محصولات شما استفاده نمايند.

 

درآمد زايي:

ميزان سودآوري و درآمد زايي سايتها به نوع سايت و اهداف آن بستگي دارد البته ميزان فعاليت صاحبان سايتها و بروز رساني و رسيدگي به آنها نيز عامل بسيار مهمي است. اما امروزه شرکتها و افراد بسياري هستند که فقط از طريق سايت فعاليت مي کنند و عمده درآمد آنها از طريق سايت و مشتريان آنلاين است.

 

ايجاد تغيير و تحول در طراحي وب سايت کليد موفقيت آنلاين

 

بسياري از افراد کسب و کار آنلاين خود را شروع کرده در حالي که هر روز رقابت در هر نوع بازاري شديدتروبيشتر مي شود. به همين دليل در حال حاضر داشتن وب سايتي با طراحي مناسب، بخش مهمي از موفقيت هر سازمان آنلايني ميباشد. به خاطر داشته باشيد وب سايت شما به واقع "ويترين فروشگاه" شماست. درست مانند هر فروشگاه خوبي، بهترين ويترين بيشترين مشتري را جذب مي کند.

بسياري از افراد مرتکب يک اشتباه مي شوند و آن صرفه جويي در هزينهء طراحي وب سايتشان مي باشد.مشکل اينجاست که تعدادي از شرکت هاي تجاري آنلاين، طراحي ارزان و يا حتي رايگان پيشنهاد مي کنند. اما حقيقت امراين است که اين طراحي هاي کم و يا بدون هزينه بسيار ابتدايي ميباشند. اغلب آنها قالب هاي ساده اي هستند که حتي خود شما ميتوانيد رنگها، سبک طراحي و يا فونت آن را که بسيار محدود هستند به سليقه خود انتخاب کنيد.

اما اگرمصمم به راه اندازي و اجراي يک وب سايت موفق هستيد و جاه طلبانه به مقدار زيادي ترافيک روي وب سايت خود فکر مي کنيد، در واقع به يک طراحي وب که قادر به اجراي اين جريان مي باشد نياز داريد.

پيدا کردن يک شرکت طراحي وب سايت کار دشواري نيست. شما با صرف هزينه هاي کوچک بر روي موفقيت آنلاين و آيندهء خود سرمايه گذاري مي کنيد. براي اين کار بايد ابزار مناسب آن را در دست داشته باشيد.در واقع طراحي وب سايت با کيفيت بالا اساس موفقيت کار شماست.

يک شرکت طراحي وب سايت خوب، دو چيز اساسي به شما ارائه ميدهد: اولين موردي که به نظر مي رسد رضايت از زيبايي طراحي مي باشد. و مورد دوم شامل تکنولوژي تغييرو تحول در طراحي و قرار گرفتن هنربرنامه نويسي در آن مي باشد. اجازه دهيد در مورد اين دو عنصر کمي بيشتر و بازتر صحبت کنيم.

طراحي وب سايت شما نياز به زيبايي دارد زيرا براي جلب توجه بازديدکنندگان اين مورد براي شما يک شانس تلقي مي شود. هنگامي که براي اولين بار ترافيک به سمت صفحهء مورد نظر در وب سايت شما مي آيد، اين مسئله بسيار مهم و حياتي است که توجه آني و علاقهء بازديدکنندگان را کسب کنيد.شما نياز به يک وب سايت بصري خيره کننده اي داريد که نه تنها توجه بازديدکنندگان را جلب کرده بلکه منجر به هدايت آنها به وب سايت شما و درنهايت فروش قطعي مي شود.همچنين اين وب سايت بصري خيره کننده بايد در طراحي از تکنولوژي تغيير و تحول در طراحي نيز استفاده کند. براي مثال ميتوان از توانايي پخش ويدئوها که تبليغات بسيار خوب و بزرگي براي بازاريابي محصوب مي شود نام برد. همچنين در طراحي سايت بايد از هنر برنامه نويسي در لينکها و ساختار آن وب سايت استفاده شود زيرا اين نوع لينکها قادرند ازموتورهاي جستجو به تمامي سايتهاي ديگر متصل شوند.

نمايه سازي براي موتورهاي جستجو بسيار مهم است زيرا ميتواند وب سايت شما را در رتبه بندي جستجوي صفحات ارتقا دهد. يک شرکت طراحي وب سايت خوب، در مطالب سايت نيز به شما کمک مي کند تا مطمئن شويد تمامي مطالب جالب، مرتبط و آموزنده است.چرا که اين موضوع در افزايش آمار رتبه بندي موتورهاي جستجو به شما کمک زيادي مي کند.اين عوامل به سهولت جستجوي مشتريان کمک ميکند تا راحت تر به انواع محصولات و  طراحی  خدمات ارائه شده وب سايت شما دست يابند. و بالاخره يک شرکت طراحي وب سايت خوب، سايت شما را به گونه اي طراحي مي کند که از conversion rate بالاي آن مطمئن باشيد. اين بدان معني است که ايجاد بار ترافيک جديد بر روي سايت و ايجاد شانسهاي بهتر از معمول براي جذب بازديدکنندگان و تبديل آنها به مشتريان دست به نقد به کمي زمان نيازمند است.

بهترين شرکت طراح وب سايت فقط براي مدت زمان کوتاه مورد نياز شما نسيتند.آنها فقط براي طراحي وب مورد استفاده شما قرار نميگيرند بلکه بعد از آن به شما بستگي دارد که از خصوصيات سودمند آن شرکت براي بهتر شدن و پيشرفت خود استفاده کنيد. يک شرکت طراحي وب سايت خوب ميتواند شريک دائمي براي شما بوده و هنگامي که سايت شما نياز به تغييري کوچک در جهتي خاص دارد، هميشه در کنار شما باشد. قرار دادن فرم جديدي ازتکنولوژي که باعث تاثيرگذاري بيشتر طراحي وب سايت شما مي شود نيز از جمله کارهاي اين شرکت مي باشد. 

احتمالاً هنگامي که شروع به جستجو کنيد، با چند عبارت مختلف و کوچک به کليد واژه اي با سطح ترافيک بالا و کم رقابت دست پيدا خواهيد کرد. اين دقيقاً چيزي است که دنبالش بوديد! اگر هدف شما ايجاد کسب و کار در يک منطقه کوچک و دور افتاده مي باشد، جستجوي کليد واژه هايي با حجم کم جستجو را ناديده نگيريد. اگر چنين کلماتي هستند که با وب سايت شما مرتبط مي باشند، قادر خواهيد بود ترافيک بسيار بالاتر و با کيفيت بسيار عالي بدست آوريد.

 

هفت موردي که مشتريان در يک وب سايت طراحي شده به دنبال آن هستند:

 

 

اگر کسب و کار شما آنلاين مي باشد، اگر  طراحی وب سايت خود را به عنوان يک پايگاه براي ارائه محصولات خود و خوانندگان آن را مشتري تلقي مي کنيد، بايد بگويم که نمي توانيد هميشه فکر کنيد که افراد وقت و پول خود را صرف وب سايت شما مي کنند. بنابراين تغيرات و تنظيمات دوره اي براي سايت شما بسيار ضروري است. با اين عمل در خواهيد يافت که نياز مشتريان از طريق سايت شما واقعاً برآورده مي شود ويا فقط براي آنها دسترسي به يک رسانه اجتماعي و يا وبلاگ نويسي ايجاد کرده ايد!

افراد سليقه هاي متفاوتي دارند اما هنگامي که به اينترنت متصل مي شوند همگي به دنبال چند مورد هستند که کدام وب سايت را براي انتخاب نيازهاي خود دنبال کنند، به چه وب سايتي اعتماد کرده و از کدام سايت پشتيباني کنند. ليست زير به 7 مورد ضروري که هر وب سايت بايد دارا باشد اشاره مي کند:

 

سهولت استفاده

وب سايت شما نبايد گيج کننده بوده و يا حرکت در آن سخت باشد. مشتريان وب سايت معمولا به دنبال مواردي ساده هستند: محصولات شما، اطلاعاتي در مورد شما، وبلاگ شما و شماره هاي تماس و... . تمامي اين موارد بايد کاملاً مشخص بوده و پيدا کردن آنها ساده باشد. هرگونه اطلاعات ديگر و يا لينکهاي ديگري که براي افراد قرار داده ايد نيز بايد اينگونه باشد. فونت آن براي خواندن آسان و لينک آن داراي کلمات کليدي قوي براي جستجو باشد.

 

وضوح محتوا

مطالب از شماره هاي تلفن گرفته تا فعاليتهاي شما بايد به آساني قابل درک باشد.تمامي اين موارد بايد براي تک تک صفحه هاي وب سايت شما رعايت شود. اگر خوانندگان مطالب را درک نکنند ديگر سراغ شما و مطالبتان نخواهند آمد.

 

اعتبار

اولا وب سايت شما قطعاً بايد داراي يک صفحه اختصاصي به عنوان " تماس" و يک فرم اختصاصي " تماس با ما " را دارا باشد. مانند آدرس ايميل، آدرس محل استقرار شرکت و شماره تلفنها .(از قرار دادن ايميل هاي عمومي از قبيل ياهو و گوگل پرهيز کنيد) 

اعتبار يک وب سايت فقط شامل مطالب يا نظرات و ايده هاي آن نمي باشد. بلکه به بازديدکنندگان و افرادي که جزء پيروان تويتر و يا از طرفداران فيس بوک هستند نيز بستگي دارد. همچنين جوايز و گواهينامه هاي دريافت شده آن وب سايت به اعتبار آن کمک مي کند. خوانندگاني که سرعت بيشتري در خواندن مطالب دارند، زودتر قادر به کشف اين موضوع نسبت به ديگران مي باشند که کسب و کار پر رونق شما را شناسايي کنند. آنها نسبت به ديگران زودتر قادر به تصميم گيري و اعتماد به شما هستند.

 

منحصر به فرد بودن طراحي

اين موضوع بستگي به طراحي وب سايت، محصولات و مطالب شما دارد.اگر سايت شما جالب به نظر نرسد، افراد وقت خود را براي جستجو در آن تلف نمي کنند.اگر شما در بازار کسب و کار شبيهه ديگران هستيد، چرا خوانندگان به مطالب شما توجه کنند؟!

 

مشارکت و توانايي دادن بازخورد

اگر مشتريان نتوانند به آساني به شما دسترسي پيدا کنند، آنها شما را رها خواهند کرد. همچنين اگر با شما تماس گرفته و سريع پاسخي دريافت نکنند، شما را ترک کرده و به فراموشي مي سپارند. آنها قادرند به اعتبار شما نيزلطمه وارد کنند. لذا براي مشتريان خود راههاي ساده براي برقراري ارتباط با سايت خود در نظر گرفته و تا جاي امکان راه حل هايي که براي شما قابل انجام   طراحی مي باشد ارائه کنيد؛ از جمله ارائه شماره تلفن و آدرس، ارائه شبکه هاي اجتماعي، فرم تماس، وبلاگ نويسي و ديگر راههاي معمول. هنگامي که افراد دريافتند شما هميشه در دسترس هستيد، به شما اعتماد کرده و وفادار خواهند بود.

 

 

آيا اينترنت همان وب است؟

. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس ، اينترنت اکسپلورر ، سافاري و… ساخته شده است. درواقع اينترنت مجموعه اي از فناوري ست که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت همچنان در اثر هجر باقي مي ماند. بايد به اين نکته توجه داشت که بسياري از برنامه هاي تحت شبکه بدون نياز به وب کار مي کنند مانند ايميل، FTP ، IRC يا چت مبتني بر اينترنت ، نرم افزارهاي پيام رسان ، تل نت، تورنت...

اينترنت يک دا?ن تو در تو است از تلفن‏ها، خطوط کابلى، ماهواره‏ها، سيم‏هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. توصيه مي کنم مقاله اينترنت چيست را در همين سايت ايران کالا مطالعه کنيد. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است. ما ميتوانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏دهى (مثل http://www.irankala.org) در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اينكه باعث حذف اعلان‏ها و فرمان‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايلهايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايلهاى HTML را به عنوان صفحات وب ميشناسيم.

حالتـهاى زيادى پيش مـي آيد که به جـاى وب از اينترنت استفاده مي کنيم : مثل وقتى که يک e-mail ميفرستيم؛ يک MP3 را به وسيله يک برنامه انتقال مستقيم (peer-to-peer) دريافت مي کنيم؛ يا يک پيام فورى را توسط برنامه‏اى مانند ICQ ارسال مي کنيم. و نيز برخى از آدرسهاى وب که با ".www" شروع نميشوند. طراحی وب سایت به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو?ً نيازى به وارد کردن ".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد ميکنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد. سرور اغلب سايت را حتى بدون پيشوند (به عنوان مثال irankala.org ) تشخيص مي دهد. اما اگر نتوانست، خود مرورگر پيشوند را اضافه مي کند و دوباره آن را ارائه مي کند؛ يا به اميد پيدا کردن يک مورد منطبق، آن را از سرورهاى بزرگتر و بزرگتر طلب (ping) مي کند. حتى اگر شما www را وارد نکرده باشيد هنگام برقرارى ارتباط در مرورگر شما نمايش داده مي شود. اما بايد کمى هم مراقب باشيد، به هر حال بعضى از سرورها کمى غير عادى هستند و توانايي تصحيح URL ها را ندارند؛ بنابراين اگر www را ننوشته باشيد ممکن است سايتتان را پيدا نکنيد.

يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد « در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده ». در حال حاضر کاربران، سايتها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند .

 

 

در اين فصل شما مي توانيد اولين صفحه وب خودتان را خلق نماييد و با XHTM آشنا خواهيد شد و مرحله به مرحله كارهاي خود را در مرورگر تست ميكنيد .

بگذاريد دقيق شويم ! طراحي وب سايتي كه شما مي بينيد به سه لايه اصلي تقسيم مي شود:

 

 

يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!

 

لايه اول لايه محتوي است كه مانند شاسي ماشين است و شامل تگهاي متفاوتي مي باشد .لايه دوم لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.

چيزي كه در اين كتاب آموزش داده مي شود مربوط به 2 لايه  HTML و  CSS است.

ديدن Source برنامه:

 

ديدن كد برنامه مي تواند به يادگيري شما سرعت ببخشد البته بايد در انتخاب وب سايت خود دقت نماييد تا اشتباه آنها مسير يادگيري شما را تغيير ندهد. روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source  يا view source را بزنيد.

بايد صفحه اي مانند زير در فايرفاكس ببينيد:

 

 

يا در IE

 

 

عناصر اصلي يك صفحهHTML :

 

 يک DocType

يک<html> tag

يک<head>  tag

يک<title>   tag

يک<body>   tag

 براي ديدن تصوير واضحتر روي تصوير بالا کليک کنيد

 

و حالا يك نمونه كد فقط شامل عناصري اصلي :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>Untitled Document</title>

         <meta http-equiv="Content-Type   content="text/html; charset=utf-8"/>

    </head>

    <body>

    </body>

</html>

 

حالا مي خواهيم با تك تك اين عناصر آشنا شويم :

 

داك تايپ DocType  : Document Type Definition 

 

اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.

در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.

داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5  كه به تازگي مطرح شده است.

براي ديدن داك تايپ هاي موجود به اين آدرس بريدhttp://reference.sitepoint.com/html/doctypes

 

<!DOCTYPE  html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

به کدهاي داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره كند کدام است.

تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

 

عناصر HTML  :

 

قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag)  آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

تگ HTML    <html>

تگ HEAD   <head>

 

تگ ها مي توانند شامل چند attribute  (ويژگي) باشند:

<html   xmlns="http://www.w3.org/1999/xhtml "  dir="rtl" >

 

dir يك نام  attribute است و rtl ، value (مقدار) آن است كه بين " " قرار گرفته است.

 

  

تگ ها به دودسته container و empty  تقسيم مي شوند.تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML  باز شده و بسته شده است. تگهاي empty  متفاوت هستند مانند مثال 

در استفاده از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيم دچار error مي شويم.

نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :

empty tag in html

 

بسيار عالي شما هم اين نتايج را پيدا كرديد :

• <br/>

• <hr/>

• <meta/>

• <base/>

• <link/>

• <meta/>

• <img/>

• <embed/>

• <area/>

• <input/>

• 

اين را گفتم كه هيچ وقت دنياي وب و جستجو را فراموش نكنيد.

 

غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و  body

 

اين يك تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و .....

 

يك تگ container است كه متن وسط آن در عنوان (Title) بالاي صفحه قرار ميگيرد :

به تايتل درسايت بنده توجه کنيد :

 

موارد استفاده ديگر:

 

• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است

• در زمان بوكمارك كردن صفحه با اين عنوان  در ليست ما ذخيره مي شود

• براي معرفي آن صفحه است 

• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت  وب اسکالا هم استفاده شده است

 

عنصر meta  :

 

متا تگ يك تگ empty است و براي  دلايل متفاوتي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ....

Css و  javascript  هم در  head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي  در طراحي هاي حرفه اي  قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.

 

عناصر body :

 

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......

در قسمت بعدي به طور عملي با هم يك وب سايت مي سازيم!

 

:

کلمه اول   کلمه دوم

فاصله اول بين کلمات با فشار دادن دکمه Space ايجاد مي شود. مرورگر فاصله اول را تشخيص مي دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتي نمي کند و شما فقط يک فاصله را در مرورگر مي بينيد. افزودن کد ;nbsp& مرورگر را مجبور مي کند تا بين دو کلمه فاصله اضافي بگذارد. شما با تکرار اين کد مي توانيد به هر تعداد که بخواهيد فاصله خالي ايجاد کنيد.مانند زير:

 

کلمه اول &nbsp;&nbsp;&nbsp;&nbsp;کلمه دوم

نتيجه:

 

کلمه اول     کلمه دوم

 

اين فرمان چهار فضاي خالي اضافي بين دو کلمه ايجاد مي کند. و در مجموع پنج فضاي خالي داريم.

 

بحث بعدي ما علامت کپي رايت است. شما مي توانيد به همان روشي که براي فضاي خالي اضافي ايجاد کرديم اين علامت را نيز به وجود بياوريد. يعني با استفاده از کد آن. کد علامت کپي رايت اين است:  ;copy& به اين مثال توجه کنيد:

 

this page Copyright &copy; 2007 by me

متن نتيجه:

 

this page Copyright © 2007 by me

 

روش کار براي تمامي کاراکترهاي ويژه به همين صورت است فقط کد آنها را در متن HTML قرار دهيد.

 

در جدول زير مي توانيد تعدادي از اين کاراکترهاي ويژه را به همراه کد سازنده آنها ببينيد:

 

نام کاراکتر شکل ظاهري کاراکتر کد سازنده کاراکتر

امپرسند & &amp;

علامت کپي رايت © &copy;

علامت ثبت شده ® &reg;

علامت تجاري ™ &trade;

علامت کوچکتر از < &lt;

علامت بزرگتر از > &gt;

علامت خنجر † &dagger;

-------------------- » &raquo;

-------------------- « &laquo;

خط فاصله ام — &#151;

علامت درجه ° &deg;

يک چهارم ¼ &frac14;

يک دوم ½ &frac12;

سه چهارم ¾ &frac34;

نقطه مياني · &middot;

علامت تعجب وارونه ? &iexcl;

علامت يورو € &euro;

علامت پوند انگليس £ &pound;

علامت تقسيم ÷ &divide;

علامت راديکال ? &radic;